div {
  box-sizing: border-box;
}

.board {
  display: grid;
  grid-template-columns: repeat(7, 12vw);
  grid-template-rows: repeat(6, 12vw);
  width: 84vw;
  outline: 1px solid black;
  margin: auto;
}

.board .field {
  border: 1px solid black;
}

.board .field .piece {
  width: 10vw;
  height: 10vh;
  border-radius: 50%;
  margin: 1vw;
}

.board .field .color-a {
  background-color: blue;
}

.board .field .color-b {
  background-color: red;
}

@media screen and (min-width: 60em) {
  .board {
    width: 49vw;
    grid-template-columns: repeat(7, 7vw);
    grid-template-rows: repeat(6, 7vw);
  }
  .board .field .piece {
    width: 5vw;
    height: 5vw;
    margin: 1vw;
  }
}
